<template>
  <border-box>
    <dv-card>
      <template v-slot:header>
        <dv-title-1> 应急事件 </dv-title-1>
      </template>
      <div class="dv-card-content">
        <div>
          <dv-card
            class="mb-5"
            style="width: 444px; height: 240px"
            :card-bg="require('@/assets/5dhz/4bj.png')"
            sub
          >
            <template #header>
              <dv-title2>应急资源</dv-title2>
            </template>
            <div style="text-align: center">
              <Image
                :src="require('@/assets/components/board/a2.png')"
                width="420"
              ></Image>
            </div>
          </dv-card>
          <dv-card
            style="width: 444px; height: 340px"
            :card-bg="require('@/assets/5dhz/2bj.png')"
            sub
          >
            <template #header>
              <dv-title2>应急事件动态</dv-title2>
            </template>
            <div style="text-align: center">
              <Pie eleId="pie2" :source="pie2" width="430" height="170"></Pie>
              <Image
                :src="require('@/assets/components/board/a4.png')"
                width="420"
              ></Image>
            </div>
          </dv-card>
        </div>
        <div>
          <dv-card
            style="width: 444px; height: 240px"
            :card-bg="require('@/assets/5dhz/4bj.png')"
            sub
          >
            <template #header>
              <dv-title2>应急经费</dv-title2>
            </template>
            <div style="text-align: center">
              <Image
                :src="require('@/assets/components/board/a3.png')"
                width="420"
              ></Image>
            </div>
          </dv-card>
          <dv-card
            style="width: 444px; height: 340px"
            :card-bg="require('@/assets/5dhz/4bj.png')"
            sub
          >
            <template #header>
              <dv-title2>已完成事件考核评分</dv-title2>
            </template>
            <Image
              :src="require('@/assets/components/board/a5.png')"
              width="440"
            ></Image>
          </dv-card>
        </div>
      </div>
    </dv-card>
  </border-box>
</template>

<script>
import DvCard from "@/components/DvCard/index.vue";
import DvTitle1 from "@/components/DvTitle1";
import BorderBox from "@/components/BorderBox1";
import DvTitle2 from "@/components/DvTitle2.vue";
import Image from "@/components/Image";
import Pie from "@/components/charts/Pie";
export default {
  name: "FiveWar",
  components: {
    DvTitle2,
    DvTitle1,
    DvCard,
    BorderBox,
    Image,
    Pie,
  },
  data() {
    return {
      pie2: [
        { value: 24, name: "搭建专班1" },
        { value: 32, name: "搭建专班2" },
        { value: 29, name: "搭建专班3" },
        { value: 48, name: "搭建专班4" },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.dv-card-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cityData {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
</style>
